<style scoped>

.row-bg {
 
  line-height:60px;
  background: #409EFF;
}

.logo {
  
  text-align: left;
  
  text-decoration: none;
  color:#fff;
}

.usermenu {
  float: right;
  padding: 0 2em;
  color:#fff;
}
.usermenu a {
  text-decoration: none;
  margin: 0 0.2em 0 1em;
  color:inherit;
}
#main {
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}
</style>
<template>

 
 
<el-container style="height:100%">

  <el-header class="row-bg" justify="space-between" type="flex">

   <el-col :span="6"><a href="/" target="_blank" title="Admin" class="logo" >后台管理</a></el-col>
   <el-col :span="12"> &nbsp; </el-col>
   
   <el-col :span="6">
        <div class="usermenu" >
          欢迎您：{{user.name}}
          
          <router-link :to="{path: '/'}"><i class="el-icon-location"></i> 首页</router-link>
          <a href="javascript:;" @click="logout"><i class="el-icon-circle-close"></i> 退出</a>
        </div>
  </el-col>

  </el-header>

  <el-container>
    <el-aside width="200px">

    <el-menu router style="height:100%" :unique-opened="true" default-active="1">
      <el-submenu index="1" >
        <template slot="title">
          <span slot="title">网站管理</span>
        </template>
        
        <el-menu-item index="/Management/config">系统配置</el-menu-item>
       
      </el-submenu>

      <el-submenu index="2">
        <template slot="title">
          <span>单页信息</span>
        </template>
       
        <el-menu-item index="/ainfo/class">单页分类</el-menu-item>
        <el-menu-item index="/ainfo/list">单页列表</el-menu-item>
        
      </el-submenu>

       <el-submenu index="3">
          <template slot="title">
            <span>信息管理</span>
          </template>
          
          <el-menu-item index="/info/class">信息分类</el-menu-item>
          <el-menu-item index="/info/list">信息列表</el-menu-item>
          
       </el-submenu>
       <el-menu-item index="/Leavemessage">留言板</el-menu-item>
    </el-menu>

    </el-aside>


    <el-container>
      <el-main v-if="path">这是一个企业网站管理后台的DEMO，proxyTable可以代理跨域，https://www.easyapi.com/</el-main>
      <el-main v-else><router-view id="main"></router-view> </el-main>
      <el-footer>版权所有</el-footer>
    </el-container>


  </el-container>


</el-container>

   <!-- <el-row type="flex" class="g-head">
      <a href="/" target="_blank" title="Admin" class="logo" >后台管理</a>
      <div class="nav">
        <div class="usermenu" >
          欢迎您：{{user.name}}
          <el-menu-item index='/management'><i class="el-icon-location"></i> 首页</el-menu-item>
          <router-link :to="{path: '/'}"><i class="el-icon-location"></i> 首页</router-link>
          <a href="javascript:;" @click="logout"><i class="el-icon-circle-close"></i> 退出</a>
        </div>
      </div>
    </el-row>

    <el-menu :default-active="activeMenu" class="g-side" router >
      <template v-for="(route, index) in menus">
        <template v-if="route.children">
          <el-submenu :key="index" :index="route.name">
            <template slot="title">
              {{route.meta.name || route.name}}</template>
            <el-menu-item v-for="(cRoute, cIndex) in route.children" :key="cIndex" :index="cRoute.name" :route="cRoute"><i class="ion menuIcon" v-html="cRoute.meta.icon"></i>{{cRoute.meta.name || cRoute.name}}1</el-menu-item>
          </el-submenu>
        </template>
        <template v-else>
          <el-menu-item :route="route" :index="route.name" :key="'nav'+index">{{route.meta.name || route.name}}</el-menu-item>
        </template>
      </template>
      
       <el-menu-item index='/management'>网站管理</el-menu-item>

       <el-menu-item index='/ainfo'>单页信息</el-menu-item>

       <el-submenu >
          <template slot="title">
            <span>信息管理</span>
          </template>
          <el-menu-item index="/infoclass">信息分类</el-menu-item>
          <el-menu-item index="/infolist">信息列表</el-menu-item>
       </el-submenu>
       <el-menu-item index="/lyb">留言板</el-menu-item>
    </el-menu>

    <div class="g-statues-bar p-lr">
      <el-breadcrumb separator="/" class="bread" id="mybread">
        <el-breadcrumb-item v-for="(item,index) in breadcrumbs" :key="index" :to="item">
          {{ item.meta.name || item.name }}
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>  -->

   <!--  <router-view id="main"></router-view> -->
  
</template>
<script>
//import instance from "../api";


export default {
 
  data() {
    return {
      user: {},
      menus: {},
      //this.$root.menuData [{"name":"平台-角色管理"}]
    };
  },
  computed: {
    activeMenu: function(){
      return this.$route.name
    },
    breadcrumbs: function(){
      return (this.$route && this.$route.matched) || []
    },
    path: function(){
      return this.$route.path=="/"
    },
  },
  methods: {
    logout: function() {
      this.$confirm("确定退出?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "info"
      }).then(() => {
          this.$emit("logout");
        }).catch(() => {});
    }
  },
  created: function() {

    // if (!this.user) {
    //   this.$router.push({ path: "/login" });
    // }
   
  }
};
</script>
